<!DOCTYPE html>
<html>
<head>
	<title>vue</title>
	<base href="" target="_blank">
</head>
<body>
	<div id="app">
		<span>{{message}}</span>
		<button v-bind:disabled="isDisable">I'm a button</button>
		<p v-if="seen">some text</p>
		<a v-bind:href="url">this is a link</a>
		<p>original message: {{msg}}</p>
		<p>reversed message: {{reversedMsg}}</p>
		<p>
			ask a yes/no quesion:
			<input v-model="quesion">
		</p>
		<p>{{answer}}</p>
		<div class="red" v-bind:class="color">v-bind:class</div>
		<p v-bind:style="styleObj">绑定内联样式</p>
		<div v-if="ok">
			<p>ok</p>
		</div>
		<div v-else>
			<p>else</p>
		</div>
		<ul>
			<li v-for="(item, index) in items">
				{{index}}-{{item.name}}
			</li>
		</ul>
		<div>
			<span v-for="n in 10">{{ n }}</span>
		</div>
	</div>
</body>
</html>

<!-- JS -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			message: 'hello vue that\' it',
			isDisable: "false",
			seen: true,
			url: "http://www.baidu.com",
			msg: "hello",
			quesion: '',
			answer: 'I cannot give you an answer until you ask a question!',
			color: 'orange',
			styleObj: {
				backgroundColor: 'orange',
				color: 'white'
			},
			ok: true,
			no: false,
			items: [
			{name: 'zhan'},
			{name: 'zhang'},
			{name: 'zhao'}
			]
		},
		computed: {
			reversedMsg: function () {
				return this.msg.split('').reverse().join('');
			}
		},
		watch: {
			quesion: function (newQuetion) {
				this.answer = 'waiting you...'
				this.getAnswer();
			}
		},
		methods: {
			getAnswer: _.debounce(function () {
				var vm = this;
				if (this.quesion.indexOf('?') === -1) {
					vm.answer = 'you lose your quesion mark';
					return;
				}
				vm.answer = 'thinking...';
				axios.get('https://yesno.wtf/api')
				.then(function(response) {
					vm.answer = _.capitalize(response.data.answer)
				})
				.catch(function(error) {
					vm.answer = 'could not reach api ' + error;
				})	
			},500)
		}

	});
</script>





<style type="text/css">
	.red {
		background-color: red;
	}
	.black {
		background-color: black;
	}
	.orange {
		color: orange;
	}
</style>









